<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style>
      p,
      h4 {
        margin: 0;
      }
      .modal {
        width: 500px;
        background-color: #fff;
        border: 1px solid rgba(0, 0, 0, 0.2);
        border-radius: 6px;
        box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
      }
      .modal-header {
        padding: 15px;
        border-bottom: 1px solid #e5e5e5;
      }
      .modal-content div {
        padding: 20px;
      }
      .modal-footer {
        padding: 15px;
        text-align: right;
        border-top: 1px solid #e5e5e5;
      }
      .btn {
        padding: 5px 15px;
        border: none;
        outline: none;
      }
      .blue {
        color: #fff;
        background-color: #39f;
        border-color: #39f;
      }
    </style>
    <script src="../vue.js"></script>
  </head>
  <body>
    <div id="app">
      <custom-modal modal-title="提醒"></custom-modal>

      <custom-modal>
        <ul slot="modal-content">
          <li v-for="item of list">{{ item }}</li>
        </ul>

        <div slot="modal-footer">
          <input class="btn blue" type="button" value="确定" />

          <input class="btn" type="button" value="重置" />

          <input class="btn" type="button" value="取消" />
        </div>
      </custom-modal>

      <custom-modal @on-ok="ok" @on-cancle="cancle"></custom-modal>
    </div>
    <script>
      /*
        设置的props：
          modalTitle 标题 默认为 '这是标题'

        定制模板：
          slot为modal-content  定制内容模板
          slot为modal-footer   定制底部模板

        监控子组件状态变化：
          事件名on-ok        点击确定触发
          事件名on-cancel    点击取消触发
    */

      //全局组件
      Vue.component('custom-modal', {
        props: {
          modalTitle: {
            type: String,
            default: '这是标题'
          }
        },

        template: `
          <div class="modal">
              <div class="modal-header">
                <h4>{{ modalTitle }}</h4>
              </div>

              <div class="modal-content">
                <div>
                  <slot name="modal-content">这是内容</slot>
                </div>
              </div>

              <div class="modal-footer">
                <slot name="modal-footer">
                  <input class="btn blue" type="button" value="确定" @click="okHandle"/>
                  <input class="btn" type="button" value="取消" @click="cancleHandle"/>
                </slot>
              </div>
          </div>`,

        methods: {
          okHandle: function() {
            alert('点击确定了')

            this.$emit('on-ok')
          },

          cancleHandle: function() {
            alert('取消了')
            this.$emit('on-cancle')
          }
        }
      })

      //数据
      var data = {
        list: [...'妙味课堂']
      }

      //vm实例
      var vm = new Vue({
        el: '#app',

        data: data,

        methods: {
          ok: function() {
            alert('确定了，做点什么吧')
          },

          cancle: function() {
            alert('子组件说取消了')
          }
        }
      })
    </script>
  </body>
</html>
